import React, { Component } from 'react';
import { Route, NavLink } from 'react-router-dom';
import PropTypes from 'prop-types';

import "./Page1.css";
import { Page2 } from './Page2';

class Page1 extends Component {

    // 定义 contextTypes ，以使该组件能够接收到  context
    static contextTypes = {
        pushNavConfig: PropTypes.func,
        popNavConfig: PropTypes.func,
    };

    configID;

    navConfig = {
        left: "默认",
        center: "页面1",
        right: <NavLink to={`${this.props.match.url}/page2`} >子导航</NavLink>,
        navClass: "page1_nav"
    };

    componentWillMount() {
        this.configID = this.context.pushNavConfig(this.navConfig);      //设置导航条
    }

    componentWillUnmount() {
        this.context.popNavConfig(this.configID);       //移除对导航条的设置
    }

    render() {
        return (
            <fieldset className="page1" >
                <legend>页面1</legend>
                <p>我是页面1</p>
                <Route path={`${this.props.match.path}/page2`} component={Page2} />
            </fieldset>
        );
    }
}



export { Page1 };